<template>
	<view class="history-container">

		
		<!-- 服务类型筛选 -->
		<view class="filter-tabs">
			<view 
				class="filter-tab" 
				:class="{ active: currentType === '' }"
				@click="filterByType('')"
			>全部</view>
			<view 
				class="filter-tab" 
				:class="{ active: currentType === 'repair' }"
				@click="filterByType('repair')"
			>报修</view>
			<view 
				class="filter-tab" 
				:class="{ active: currentType === 'complaint' }"
				@click="filterByType('complaint')"
			>投诉建议</view>
			<view 
				class="filter-tab" 
				:class="{ active: currentType === 'help' }"
				@click="filterByType('help')"
			>生活求助</view>
		</view>
		
		<!-- 服务列表 -->
		<view class="service-list">
			<view 
				class="service-item" 
				v-for="(item, index) in serviceList" 
				:key="index" 
				@click="viewServiceDetail(item.id)"
			>
				<view class="service-top">
					<text class="service-title">{{item.title}}</text>
					<view class="service-status" :class="'status-' + item.status">
						{{getStatusText(item.status)}}
					</view>
				</view>
				<view class="service-content">{{item.content}}</view>
				<view class="service-meta">
					<text class="service-type">{{getTypeText(item.type)}}</text>
					<text class="service-time">{{formatDate(item.createTime)}}</text>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="serviceList.length > 0">
			<text class="load-more-text" v-if="hasMore">加载中...</text>
			<text class="load-more-text" v-else>已经到底啦</text>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-box" v-if="serviceList.length === 0">
			<image class="empty-image" src="/static/empty.png"></image>
			<text class="empty-text">暂无服务记录</text>
		</view>
	</view>
</template>

<script>
import { getServiceList } from '@/api/service.js';
import { getImageUrl } from '@/utils/image.js';

export default {
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			total: 0,
			keyword: '',
			currentType: '',
			serviceList: [],
			loading: false,
			hasMore: true
		}
	},
	onLoad() {
		this.loadServiceList();
	},
	onShow() {
		// 每次进入页面刷新数据
		this.pageNum = 1;
		this.serviceList = [];
		this.hasMore = true;
		this.loadServiceList();
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.serviceList = [];
		this.hasMore = true;
		this.loadServiceList().then(() => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.pageNum++;
			this.loadServiceList();
		}
	},
	methods: {
		// 加载服务列表
		async loadServiceList() {
			if (this.loading) return;
			
			this.loading = true;
			
			try {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				
				if (this.keyword) {
					params.keyword = this.keyword;
				}
				
				// 将字符串类型转换为整数类型，适配后端接口
				if (this.currentType) {
					const typeMap = {
						'repair': 0,
						'complaint': 1,
						'help': 2
					};
					params.type = typeMap[this.currentType];
				}
				
				const res = await getServiceList(params);
				
				// 添加新数据
				if (this.pageNum === 1) {
					this.serviceList = res.data.records || [];
				} else {
					this.serviceList = [...this.serviceList, ...(res.data.records || [])];
				}
				
				this.total = res.data.total || 0;
				
				// 判断是否有更多数据
				this.hasMore = this.serviceList.length < this.total;
			} catch (error) {
				console.error('加载服务记录失败', error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		// 获取类型文本
		getTypeText(type) {
			// 检查 type 是否为数字
			if (typeof type === 'number' || !isNaN(parseInt(type))) {
				// 如果是数字，使用数字索引的映射
				const typeMap = {
					0: '物业报修',
					1: '投诉建议',
					2: '生活求助'
				};
				return typeMap[type] || '其他服务';
			} else {
				// 如果是字符串（旧数据），使用字符串映射
				const typeStringMap = {
					'repair': '物业报修',
					'complaint': '投诉建议',
					'help': '生活求助'
				};
				return typeStringMap[type] || '其他服务';
			}
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				0: '待处理',
				1: '处理中',
				2: '已完成',
				3: '已关闭'
			};
			return statusMap[status] || '未知';
		},
		
		// 按类型筛选
		filterByType(type) {
			this.currentType = type;
			this.pageNum = 1;
			this.serviceList = [];
			this.hasMore = true;
			this.loadServiceList();
		},
		
		// 查看服务详情
		viewServiceDetail(id) {
			uni.navigateTo({
				url: `/pages/service/detail?id=${id}`
			});
		},

	}
}
</script>

<style lang="scss" scoped>
.history-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 20rpx;
}

.search-box {
	background-color: #fff;
	padding: 20rpx 30rpx;
	position: sticky;
	top: 0;
	z-index: 10;
}

.search-input-box {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.search-input {
	flex: 1;
	height: 60rpx;
	font-size: 28rpx;
}

.clear-icon {
	width: 40rpx;
	height: 40rpx;
}

.filter-tabs {
	display: flex;
	background-color: #fff;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.filter-tab {
	padding: 20rpx 0;
	margin-right: 40rpx;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.filter-tab.active {
	color: #007AFF;
	font-weight: bold;
}

.filter-tab.active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #007AFF;
	border-radius: 2rpx;
}

.service-list {
	background-color: #fff;
	margin-top: 20rpx;
}

.service-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.service-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.service-title {
	flex: 1;
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.service-status {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.status-0 {
	color: #FF9500;
	background-color: #fff5e6;
}

.status-1 {
	color: #007AFF;
	background-color: #e6f2ff;
}

.status-2 {
	color: #4CD964;
	background-color: #f0f9eb;
}

.status-3 {
	color: #909399;
	background-color: #f4f4f5;
}

.service-content {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 16rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
	overflow-wrap: break-word;
}

.service-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.service-type {
	font-size: 24rpx;
	color: #007AFF;
	background-color: #e6f2ff;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.service-time {
	font-size: 24rpx;
	color: #999;
}

.load-more {
	text-align: center;
	padding: 20rpx 0;
}

.load-more-text {
	font-size: 24rpx;
	color: #999;
}

.empty-box {
	padding-top: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 富文本内容样式 */
.rich-text-container {
	overflow-x: hidden;
}

.rich-text-container :deep(img) {
	max-width: 100% !important;
	height: auto !important;
}
</style> 